<template>
    <div>
        <van-swipe class="my-swipe" :autoplay="3000" indicator-color="white">
            <van-swipe-item v-if="images.length === 0">
                <div class="bg"></div>
            </van-swipe-item>
            <van-swipe-item v-for="(image, index) in images" :key="index">
                <!-- 这里将 image.url 改为 image.image -->
                <img :src="image.image" alt="轮播图片" style="width: 100%; height: 100%;">
            </van-swipe-item>
        </van-swipe>
    </div>
</template>

<script setup>
import axios from 'axios';
import { ref, onMounted } from 'vue';

const images = ref([]);

// 在组件挂载时请求图片数据
onMounted(async () => {
    try {
        const response = await axios.get('http://localhost:8080/lawKnowledge/image');
        images.value = response.data.data; // 假设后端返回的数据是一个数组，数组中的每个元素包含图片的URL
        // console.log('图片数据:', images.value);  // 查看整个数组
        // // 或者查看第一个元素
        // console.log('第一个图片地址:', images.value[0]?.image);
    } catch (error) {
        console.error('获取图片失败', error);
    }
});
</script>

<style scoped>
.my-swipe .van-swipe-item {
    color: #fff;
    font-size: 20px;
    line-height: 150px;
    text-align: center;
    background-color: #39a9ed;
    height: 152px;
    overflow: hidden;
}

.bg {
    background-color: #eee;
    height: 152px;
    width: 100%;
}
</style>